<template>
	<view>
		<uni-nav-bar :title="title" :statusBar="true" :border="false" left-icon="back" :fixed="true"
			@clickLeft="$tab.back()">
		</uni-nav-bar>

		<view class="px-20 py-28 bg-FFF mt-16" v-if="detail">
			<view class="grid grid-cols-5 gap-4">
				<view class="flex flex-col items-center" v-for="(item,index) in detail.userList" :key="item.id"
					v-if="index < `${detail.userList[0].userId == userInfo.userId ? 8 : 9}`" @click="hendClick(item)">
					<image :src="item.userInfo.avatar" class="image-96 round" mode=""></image>
					<view class="text-9E9E9E mt-12 text-20 u-line-1">
						{{item.userInfo.nickName}}
					</view>
				</view>
				<view class="flex flex-col items-center" v-if="detail.userList[0].userId == userInfo.userId">
					<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_jianshao.png" class="image-96"
						mode="" @click="$tab.nav(`/pages/chat2/deleteGroupUser?id=${id}&title=${title}`)"></image>
				</view>
				<view class="flex flex-col items-center">
					<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_tianjia@2x.png" class="image-96"
						mode="" @click="$tab.nav(`/pages/chat2/createGroupChat?id=${detail.groupInfo.id}`)"></image>
				</view>
			</view>
			<view class="flex justify-around mt-36" v-if="detail.userList.length > 8"
				@click="$tab.nav(`/pages/chat2/moreGroupUser?id=${id}&title=${title}`)">
				<view class="flex items-center">
					<view class="text-28">
						查看更多成员
					</view>
					<u-icon name="arrow-right" color="#000" :bold="true" size="12px"></u-icon>
				</view>
			</view>
		</view>

		<view class="px-20 py-28 bg-FFF mt-16" v-if="detail">
			<view class="mt-40" v-if="detail.groupInfo.groupLeaderId == userInfo.userId"
				@click="$tab.nav(`/pages/chat2/notes?type=2&id=${detail.groupInfo.id}`)">
				<view class="flex items-center justify-between">
					<view class="text-32">
						群名称
					</view>
					<view class="flex items-center">
						<view class="">
							{{detail.groupInfo.groupName}}
						</view>
						<u-icon name="arrow-right" color="#000" :bold="true"></u-icon>
					</view>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view>

			<view class="mt-40" v-if="detail.groupInfo.groupLeaderId == userInfo.userId"
				@click="$tab.nav(`/pages/chat2/notes?type=3&id=${detail.groupInfo.id}`)">
				<view class="flex items-center justify-between">
					<view class="text-32">
						群公告
					</view>
				</view>
				<view class="mt-24 bg-F8F8F8 py-12 px-12" v-if="detail.groupInfo.groupNotice"
					style="min-height: 160rpx;">
					{{detail.groupInfo.groupNotice}}
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view>

			<view class="mt-40" @click="$tab.nav(`/pages/chat2/notes?type=4&id=${detail.groupInfo.id}`)">
				<view class="flex items-center justify-between">
					<view class="text-32">
						我在群里的昵称
					</view>
					<view class="flex items-center">
						<view class="">
							{{detail.nickName}}
						</view>
						<u-icon name="arrow-right" color="#000" :bold="true"></u-icon>
					</view>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view>

			<!-- <view class="mt-40">
				<view class="flex items-center justify-between">
					<view class="">
						消息免打扰
					</view>
					<u-switch v-model="detail.noDisturb" activeColor="#3998FB" inactiveColor="#F8F8F8" :activeValue="1"
						:inactiveValue="0" :asyncChange="true" @change="noDisturbChange"></u-switch>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view> -->
			<view class="mt-40" v-if="detail.userList[0].userId == userInfo.userId">
				<view class="flex items-center justify-between">
					<view class="text-32">
						是否公开
					</view>
					<u-switch v-model="detail.groupInfo.isOpen" activeColor="#FF323B" inactiveColor="#F8F8F8"
						:activeValue="1" :inactiveValue="0" :asyncChange="true" @change="isOpenChange"></u-switch>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view>
			<view class="mt-40" v-if="detail.userList[0].userId == userInfo.userId">
				<view class="flex items-center justify-between">
					<view class="text-32">
						是否禁言
					</view>
					<u-switch v-model="detail.groupInfo.isMute" activeColor="#FF323B" inactiveColor="#F8F8F8"
						:activeValue="1" :inactiveValue="0" :asyncChange="true" @change="isMuteChange"></u-switch>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view>
			<view class="mt-40">
				<view class="flex items-center justify-between">
					<view class="text-32">
						置顶聊天
					</view>
					<u-switch v-model="detail.isTop" activeColor="#FF323B" inactiveColor="#F8F8F8" :activeValue="1"
						:inactiveValue="0" :asyncChange="true" @change="isTopChange"></u-switch>
				</view>
				<view class="">
					<!-- <u-line color="#EAEAEA"></u-line> -->
				</view>
			</view>
		</view>

		<view class="px-20 py-28 bg-FFF mt-16">
			<!-- <view class="">
				<view class="flex items-center justify-between">
					<view class="">
						查找聊天记录
					</view>
					<u-icon name="arrow-right" color="#333" :bold="true"></u-icon>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view> -->
			<view class="">
				<view class="flex items-center justify-between" @click="clearChat">
					<view class="text-32">
						清空聊天记录
					</view>
					<u-icon name="arrow-right" color="#333" :bold="true"></u-icon>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view>
			<view class="mt-40">
				<view class="flex items-center justify-between"
					@click="$tab.nav(`/pages/chat2/chatDetail?id=${id}&type=2`)">
					<view class="">
						投诉
					</view>
					<u-icon name="arrow-right" color="#333" :bold="true"></u-icon>
				</view>
			</view>
		</view>

		<view class="px-20 py-28 bg-FFF mt-16">
			<view class="flex justify-around"
				@click="$tab.nav(`/pages/chat2/chatIndex?groupId=${detail.groupInfo.id}&title=${title}&isGroup=${1}&id=''`)">
				<view class="flex items-center">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/chatImgs/icon_faxiaoxi.png" class="image-48"
						mode=""></image>
					<view class="font-500 ml-16 text-32" style="color: #FF323B;">
						发送消息
					</view>
				</view>
			</view>
			<!-- 	<u-divider></u-divider>
			<view class="flex justify-around">
				<view class="flex items-center">
					<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_yinshipin@2x.png" class="image-48" mode=""></image>
					<view class="font-500 ml-16">
						音视频通话
					</view>
				</view>
			</view> -->
		</view>

		<view class="mt-40 flex justify-around">
			<view class="flex items-center" @click="outGroup">
				<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_shanchu@2x.png" class="image-40"
					mode=""></image>
				<view class="text-F40600 ml-16 text-32">
					退出群聊
				</view>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<ad unit-id="adunit-9df7472023338019" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
		<!-- #endif -->

		<view class="" style="height: 200rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				detail: null,
				title: "",
				userInfo: this.$store.getters.userInfo,
			};
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			async hendClick(item) {
				const res = await this.$Api.chat.usersIsFriend({
					userId1: item.userInfo.userId
				})
				if (res.data) {
					this.$tab.nav(`/pages/chat2/userDetail?userId=${item.userInfo.userId}`)
				} else {
					this.$tab.nav(`/pages/chat2/addFriend?userName=${item.userInfo.userId}`)
				}
			},
			async getDetail() {
				const res = await this.$Api.chat.groupDetail(this.id)
				this.detail = res.data
				this.title = res.data.groupInfo.groupName + '(' + res.data.groupInfo.groupUserNum + ')'
			},
			async isOpenChange(e) {
				const res = await this.$Api.chat.groupIsOpen({
					groupId: this.detail.groupInfo.id,
					isOpen: e
				})
				this.getDetail()
			},
			async isMuteChange(e){
				const res = await this.$Api.chat.groupIsMute({
					groupId: this.detail.groupInfo.id,
					isMute: e
				})
				this.getDetail()
			},
			async isTopChange(e) {
				const res = await this.$Api.chat.chatTop({
					groupId: this.detail.groupInfo.id,
					isTop: e
				})
				this.getDetail()
			},
			async noDisturbChange(e) {
				const res = await this.$Api.chat.chatNoDisturb({
					groupId: this.detail.groupInfo.id,
					noDisturb: e
				})
				this.getDetail()
			},
			clearChat() {
				this.$modal.confirm(`确认清除群聊天记录吗?`).then(async con => {
					if (con) {
						const res = await this.$Api.chat.deleteGroup(this.detail.groupInfo.id)
						this.getDetail()
					}
				})
			},
			outGroup() {
				this.$modal.confirm(`确认退出群聊并删除聊天记录吗?`).then(async con => {
					if (con) {
						const res = await this.$Api.chat.userOutGroup(this.detail.groupInfo.id)
						this.$modal.msg('退出成功!')
						this.$tab.back(1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-switch__node {
		background-color: #e8e8e8 !important;
	}
</style>